<template>
  <div class="swiper-wrap">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="(item,index) in this.swiperList" :key="index">
        <div class="img-wrap">
          <img :src="item" />
        </div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
  import Vue from 'vue'
  import VueAwesomeSwiper from 'vue-awesome-swiper'
  import 'swiper/dist/css/swiper.css';

  Vue.use(VueAwesomeSwiper);


  export default {
    name: 'DetailSwiper',
    props: {
      swiperList: Array
    },
    data() {
      return {
        swiperOptions: {
          preventClicks: false, //默认true
          pagination: {
            el: '.swiper-pagination'
          }
        }
      }
    }
  }
</script>

<style lang="scss" scoped="scoped">
  .swiper-wrap {
    width: 100%;

    .img-wrap {
      width: 100%;
      height: 2rem;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
